<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="content">
            <div class="box">
                <div class="appTitle">
                    <h3>课程详情</h3>
                </div>
                <div class="lesson-list">
                    <div>
                        <label>所属学校：</label>
                        <div>{{lessonDetail.sSchoolName}}</div>
                    </div>
                    <div>
                        <label>课程标题：</label>
                        <div>{{lessonDetail.sTitle}}</div>
                    </div>
                    <div>
                        <label class="lesson-label">课程图片：</label>
                        <div class="lesson-img-warpper">
                            <img :src="lessonDetail.sPicture == '' ? require('../../../assets/lessonManage.png'):lessonDetail.sPicture" :alt="lessonDetail.sPicture == null?'课程默认图':'课程图片'">
                        </div>
                    </div>
                    <div>
                        <label>开课时间：</label>
                        <div>{{lessonDetail.sStartTime}}</div>
                    </div>
                    <div>
                        <label>预计结束时间：</label>
                        <div>{{lessonDetail.sExpectEndTime}}</div>
                    </div>
                    <div>
                        <label>所选摄像头：</label>
                        <div>{{lessonDetail.sAngleView}}</div>
                    </div>
                    <div>
                        <label>适合人群：</label>
                        <div>{{lessonDetail.sSuitPeople}}</div>
                    </div>
                    <div>
                        <label class="lesson-label">课程概述与亮点：</label>
                        <div>{{lessonDetail.sHighlights}}</div>
                    </div>
                    <div>
                        <label>授课教师：</label>
                        <div>{{lessonDetail.sTeacherName}}</div>
                    </div>
                    <div>
                        <label class="lesson-label">授课教师图片：</label>
                        <div class="lesson-header-img-wrapper" v-if="lessonDetail.sTeacherPicture">
                            <img :src="lessonDetail.sTeacherPicture" alt="">
                        </div>
                    </div>
                     <div>
                        <label class="lesson-label">授课教师简介：</label>
                        <div>{{lessonDetail.sTeacherIntroduction}}</div>
                    </div>
                    <div>
                        <label class="lesson-label">相关课件：</label>
                        <div v-if="lessonDetail.sCourseware !== '' " class="course-img-wrapper">
                            <img :src="lessonDetail.sCourseware | checkFileType" alt="">
                        </div>
                        <span class="lesson-icon">{{lessonDetail.sCoursewareName}}</span>
                    </div>
                     <div>
                        <label>分类标签：</label>
                        <div>{{lessonDetail.sTags}}</div>
                    </div>
                </div>
                <div class="footer">
                    <el-button @click="goBack">返回</el-button>    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Levelbar from '../../layout/Levelbar';
import { getLessonDetailByPid } from 'api/onlineLesson';
export default {
    name: 'lessonDetail',
    components: {Levelbar},
    data() {
        return {
            pid: '', // 课程ID
            lessonDetail: 
            {
                sSchoolName: 'AAA',
                sCoursewareName: 'bbbb',
                sPicture: null,
                sStartTime: '2017-10-21 15:00',
                sExpectEndTime: '2017-10-31 16:00',
                sAngleView: 'aaa',
                sSuitPeople: '全校',
                sHighlights: 'ABCEE',
                sTeacherName: 'ebc',
                sTeacherPicture: null,
                sTeacherIntroduction: 'fafdafdafdaf',
                sCourseware: '12345.rar',
                sTags: '好'
            }
            // 课程详情
        }
    },
    created() {
        this.pid = this.$route.params.lId;
        // 根据课程ID获取详情
        this.getLessonDetail();

    },
    methods: {
        getLessonDetail() {
            getLessonDetailByPid(this.pid).then(res => {
                this.lessonDetail = res.data.content;        
            }) 
        },
        goBack() {
            this.$router.go(-1);
        }  
    },
    filters: {
        checkFileType(fileUrl) {
            if (fileUrl) {
                let suffixName = fileUrl.substr(fileUrl.lastIndexOf('.'));
                var extReg = /\.(docx?|xlsx?|pptx?|pdf|txt)$/g; 
                var res = '';
                suffixName.replace(extReg, (a, b) => {
                    if (b) {
                        res = require(`../../../assets/${b}.png`);
                    } 
                });
                return res || require('../../../assets/other.png');
            }
           
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;

     .content {
        padding: 0 50px 20px;
        background: #fff;
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        .box {
            padding-bottom: 10px;
            background: #fff;
            .appTitle {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
            }
            .lesson-list{
                font-size: 14px;
                color:#333; 
                >div:first-of-type{
                    padding-top:25px;
                }
                >div{
                    padding:15px 0;
                }
                label{
                    color: #666;
                    display:inline-block;
                    width: 120px;
                    text-align: right;
                }

                label+div{
                    display: inline-block;
                    max-width: calc(100% - 150px);
                    // border:red solid 1px;
                    word-wrap:break-word;

                }
                .lesson-label{
                    vertical-align: top;
                }
                .lesson-icon{
                    vertical-align: 15px;
                }
                .lesson-img-warpper{
                    width: 750px;
                    height: 300px;

                    img{
                        width: 100%;
                        height: 100%;
                    }
                }

                
                .lesson-header-img-wrapper{
                    width: 100px;
                    height: 100px;

                    img{
                        width: 100%;
                        height: 100%;
                    }
                }

                .course-img-wrapper{
                    width:40px;
                    height: 40px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .footer{
                text-align: center;
                margin-top: 60px;
            }


        }
     }

}
</style>

